<template>
	<view class="info">
		<navbar title="报名资料" bgcolor="#6252DF" txcolor="#ffffff"></navbar>
		<view class="banner-nav">
			<image class="imgwh" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/info-top.png" mode=""></image>
		</view>
		<view class="main p30">
			<view class="fc333 bold fs36">报名信息</view>
			<view class="bor-bot pb30" v-for="(item,index) in infoData" :key="index">
				<view class="fc333 fs30 mt20">姓名：{{ item.real_name }}</view>
				<view class="fc333 fs30 mt20">手机号：{{ item.phone }}</view>
				<view class="fc333 fs30 mt20">身份证号：{{ item.id_card }}</view>
			</view>
			<view class="fc333 fs30 mt20">年龄分组：{{ baomingData.zuName }}</view>
			<view class="fc333 fs30 mt20">专业分组：{{ baomingData.zhuanyeName }}</view>
			<view class="fc333 fs30 mt30 pt20" style="line-height: 85rpx;border-top: #D8D8D8 solid 1rpx;" v-if="baomingData.source">报名渠道：{{ baomingData.source }}</view>
		</view>
		<view class="p30 bgwhite mt20">
			<view class="acea-row row-middle">
				<view class="vline"></view>
				<view class="ml20 themecolor fs40 bold">比赛信息</view>
			</view>
			
			<block v-for="(item,index) in bisaiData" :key="index">
				<view class="fs36 fc333 mt30">{{ item.title }}结果：</view>
				<block v-if="item.ranking>0">
					<view class="list acea-row row-middle">
						<view class="bold fs30 fc666">第{{ item.ranking }}名</view>
						<view class="acea-row row-middle">
							<view class="avatar">
								<!-- <image class="imgwh" :src="item.avatar" mode=""></image> -->
							</view>
							<view class="acea-row row-column row-between ml10">
								<view class="acea-row row-middle">
									<view class="fs30 fc333 bold">{{ item.stageTitle }}</view>
									<view class="tag1" v-if="item.is_be==1">{{ item.bisaiStatuName }}</view>
									<view class="tag" v-if="item.is_be==2">{{ item.bisaiStatuName }}</view>
								</view> 
								<!-- <view class="fs24 fc666 mt5">18554262265</view> -->
							</view>
						</view>
						<view class="fs32 themecolor bold" style="margin-left: 150rpx;">{{ item.zongFen }}分</view>
					</view>
					
					<view class="fc333 fs32 bold py30">评审点评记录</view>
					<view class="acea-row row-middle">
						<view class="acea-row row-column row-middle row-center" style="width: 20%;"
						v-for="(pitem,pindex) in item.pingshenList" :key="pindex">
							<view class="pingwei">
								<image class="imgwh" :src="pitem.avatar" mode=""></image>
							</view>
							<view class="fc666 fs28 py20">{{ pitem.score }}分</view>
							<view class="yuying acea-row row-middle row-center" @click="audioPaly(pitem.mp3Url,pindex)">
								<view class="iconfont icon-yuyin1"></view>
								<!-- <view class="fs24 fcwhite" v-if="audiotext>0 && pindex==aindex">{{ audiotext }}</view> -->
							</view>
							<view class="lookbtn acea-row row-middle row-center" @click.stop="open(pitem.pingData)">查看评分</view>
						</view>
					</view>
					
				</block>

				<view class="acea-row row-middle row-center row-column" v-if="item.pingshenList.length==0">
					<image class="none" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/pagenone.png" mode="aspectFit"></image>
					<text class="fs30 fc888">暂无比赛结果</text>
					<text class="fs30 fc888">待评审放榜</text>
				</view>
				<view class="bor-bot mb30 mt30"></view>
			</block>
	
		</view>
		
		<uni-popup type="center" ref="popup">
			<view class="acea-row row-middle row-column row-center ">
				<view class="pingshen-nav">
					<block v-for="(item,index) in pingData" :key="index">
						<view>
							<text>{{ item.trackName }}: </text>
							<text class="ml20">{{ item.score }}</text>
						</view>
					</block>
				</view>
				<view class="iconfont icon-iconcancel0101" @click.stop="close"></view>
			</view>
		</uni-popup>
		
		<view style="width: 100%;height: 100rpx;"></view>
		
	</view>
</template>

<script>
	let timer;
	const innerAudioContext = uni.createInnerAudioContext();
		  innerAudioContext.autoplay = true;
	import{
		baomingDetails,
	} from '@/api/other.js'
	let sysHeight = uni.getSystemInfoSync().statusBarHeight;
	import navbar from '../../components/navbar.vue';
	export default {
		components:{
			navbar
		},
		data() {
			return {
				huodong_id:'',
				stage_id:'',
				infoData:[],
				baomingData:[],
				bisaiData:[],
				audiotext:'00:00',
				aindex:'',
				palystatus: false,
				pingData:[],
				
			};
		},
		onLoad(option) {
			this.huodong_id = option.huodong_id;
			this.stage_id = option.stage_id;
			this.getinfo();
			// this.open();
		},
		methods:{
			open(item){
				this.pingData = item;
				console.log(item);
				this.$refs.popup.open();
			},
			close(){
				this.$refs.popup.close();
			},
			audioPaly(src,index){
				let that = this;
				console.log(that.palystatus);
				console.log(index);
				if( index == that.aindex ){
					// console.log('1111');
					if( that.palystatus ){
						// console.log('终止');
						innerAudioContext.pause()
					}else{
						innerAudioContext.play();
					}
				}else{
					// console.log('222');
					innerAudioContext.pause()
					setTimeout(()=>{
						innerAudioContext.play();
					},100)
				}
				
				innerAudioContext.src = src;
				innerAudioContext.onPlay((res)=>{
					// console.log('播放');
					that.palystatus = true;
					that.aindex = index;
				})
				innerAudioContext.onPause(()=>{
					// console.log('暂停');
					that.palystatus = false;
				})
				innerAudioContext.onCanplay(()=>{
					// timer = setInterval(()=>{
					// 	let currentTime = innerAudioContext.currentTime.toFixed(0);
					// 	let duration = innerAudioContext.duration.toFixed(0);
					// 	let text;
					// 	text = parseFloat(duration) - parseFloat(currentTime)
					// 	that.audiotext = text.toFixed(0)
					// 	console.log(that.audiotext);
					// 	if( that.aindex == index ) return;
					// 	that.aindex = index
					// },100)
				})
				innerAudioContext.onEnded(()=>{
					// clearInterval(timer);
					that.audiotext = 0
				})
				innerAudioContext.onError((res) => {
				  console.log(res.errMsg);
				  console.log(res.errCode);
				});
			},
			getinfo(){
				let that = this;
				baomingDetails({ 
					huodong_id: that.huodong_id
				}).then(res=>{
					that.infoData = res.data.data.baomingData.infoData;
					that.baomingData = res.data.data.baomingData;
					that.bisaiData = res.data.data.bisaiData;
				})
			},
		},
		onUnload() {
			innerAudioContext.pause();
			// clearInterval(timer);
		},
		onHide() {
			innerAudioContext.pause();
			// clearInterval(timer);
		},
		beforeDestroy() {
			innerAudioContext.pause();
			// clearInterval(timer);
		}
		
	}
</script>

<style lang="scss">
	.info{
		
		.pingshen-nav{
			min-width: 500rpx;
			min-height: 300rpx;
			border-radius: 15rpx;
			background-color: #ffffff;
			padding: 40rpx 50rpx;
			line-height: 60rpx;
			color: #333333;
			font-size: 30rpx;
			font-weight: bold;
		}
		.icon-iconcancel0101{
			font-size: 60rpx;
			color: #ffffff;
			margin-top: 30rpx;
		}
		.lookbtn{
			width: 100rpx;
			height: 50rpx;
			border-radius: 10rpx;
			color: #ffffff;
			font-size: 22rpx;
			background-color: #6252DF;
			margin-top: 10rpx;
		}
		
		.tag{
			width: 80rpx;
			height: 30rpx;
			background: #FF0000;
			border-radius: 30rpx;
			color: #ffffff;
			font-size: 20rpx;
			text-align: center;
			line-height: 30rpx;
			margin-left: 5rpx;
		}
		.tag1{
			background: rgba(98, 82, 223, 0.3);
			width: 80rpx;
			height: 30rpx;
			text-align: center;
			line-height: 30rpx;
			color: #6252DF;
			border-radius: 30rpx;
			font-size: 20rpx;
			margin-left: 5rpx;
		}
		
		.banner-nav{
			width: 100%;
			height: 424rpx;
		}
		
		.main{
			width: 100%;
			border-radius: 20rpx 20rpx 0px 0px;
			margin-top: -50rpx;
			background-color: #ffffff;
			position: relative;
			box-shadow: 0 0 15rpx #f2f2f2;
			padding-bottom: 30rpx;
		}
		
		.baoming{
			width: 100%;
			height: 140rpx;
			background-color: #6252DF;
			text-align: center;
			margin-top: 150rpx;
		}	
		
		.list{
			margin-top: 30rpx;
			
			.levelicon{
				width: 90rpx;
				height: 72rpx;
				margin: 0 10rpx;
			}
			.paiming{
				width: 72rpx;
				height: 72rpx;
				background: rgba(133, 176, 246, 0.2);
				border-radius: 50%;
				text-align: center;
				line-height: 72rpx;
				display: block;
				color: #5E92E5;
				font-size: 32rpx;
			}
			.avatar{
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-left: 50rpx;
			}
			.see{
				width: 132rpx;
				height: 52rpx;
				border-radius: 36rpx;
				text-align: center;
				line-height: 52rpx;
				color: #6252DF;
				background: rgba(98, 82, 223, 0.2);
				font-size: 20rpx;
				margin-left: 50rpx;
			}
		}
		
		.pingwei{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			overflow: hidden;
		}
		.yuying{
			background: #43CB1D;
			width: 100rpx;
			height: 48rpx;
			border-radius: 12rpx;
		}
		.icon-yuyin1{
			color: #ffffff;
			font-size: 25rpx;
		}
		.none{
			width: 540rpx;
			height: 424rpx;
		}
	}
</style>
